<template>
       <VScaleScreen  width="1920" height="1080" style="pointer-events: none;">
        <dv-loading v-if="LoadingProgress">Loading...</dv-loading>

            <div style="width: 100%;height: 100%;pointer-events: none;" class="box relative" v-else>

               <div class="fixed left-0 top-0 bottom-0 left-0 right-0 z-9999" style="pointer-events: none;">
                <Header></Header>
                <centerBox></centerBox>
                <leftBox ></leftBox>
                <rightBox></rightBox>

               </div>

              <Points></Points>

            </div>
      </VScaleScreen>
</template>

<script>
import Points from './components/Points.vue'
import Header from './components/FHeader.vue'
import centerBox from './components/centerBox.vue'
import leftBox from './components/leftBox.vue'
import rightBox from './components/rightBox.vue'

export default {
  name: 'App',
  components: {
    Points,
   Header,
   centerBox,
   leftBox,
   rightBox
  },
  data() {
    return {
      LoadingProgress:true
    }
  },
  mounted(){
    setInterval(()=>{
      this.LoadingProgress = false
    },800)
  }
}

</script>

<style>

.box{
  background-image: url(./assets/bg.png);
  background-size: 100% 100%;
  color: #E5F4FF;
}
.screen-box .screen-wrapper{
  z-index: 1001!important;
}


</style>
